<template>
  <div>
      <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>权限管理</span>
            </div>
          </template>
          <el-button type="primary" icon="Plus" @click="add(0,'1')" v-if="authErAdd">添加一级菜单</el-button>
          
          <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          default-expand-all
        >
          <el-table-column prop="name" label="菜单名称/按钮名称" sortable width="200"/>
          <el-table-column prop="auth" label="权限名称" sortable  width="180"/>
          <el-table-column prop="path" label="路径" sortable  width="180"/>
          <el-table-column prop="createTime" label="创建时间" sortable  width="180"/>
          <el-table-column prop="desc" label="备注" sortable  width="180"/>
          <el-table-column
              prop="isType"
              label="类型"
              width="180" 
              >
              <template #default="scope">
                <el-tag v-if="scope.row.isType=='1'">
                    菜单
                </el-tag>
                <el-tag v-if="scope.row.isType=='2'">
                  按钮
                </el-tag>
              
              </template>
           </el-table-column>

           <el-table-column prop="caozuo" label="操作">
              <!--具名插槽-->
              <template #default="caozuo">

                  <!--一级菜单 可以添加二级菜单-->
                  <el-button type="primary" icon="plus" v-if="authErAddSub && caozuo.row.isType=='1' && caozuo.row.parentId==0" @click="add(caozuo.row.id,'1')">添加二级菜单</el-button>
                  <!--二级菜单 可以添加按钮-->
                  <el-button type="primary" icon="plus" v-if="authErBtn && caozuo.row.isType=='1' && caozuo.row.parentId!=0" @click="add(caozuo.row.id,'2')">添加按钮</el-button>
                  <el-button type="primary" v-if="authErEdit" icon="edit" @click="edit(caozuo.row)">修改</el-button>
                  <el-button type="primary" v-if="authErDel" icon="delete" @click="del(caozuo.row.id)">删除</el-button>
              </template>
           </el-table-column> 
          </el-table>
        
        </el-card>


         <!--点击新增弹出对话框-->
         <el-dialog
              v-model="dialogVisible"
              title="添加"
              width="30%"
              :before-close="handleClose"
          >
           <el-form :model="addBean">
             <el-form-item label="父级id" >
              <el-input  label-width="80%" v-model="addBean.parentId" disabled/>
             </el-form-item>
              <el-form-item label="名称" >
                <el-input  label-width="80%" v-model="addBean.name"/>
              </el-form-item>
              <el-form-item label="权限名称" >
                <el-input  label-width="80%" v-model="addBean.auth"/>
              </el-form-item>
              <el-form-item label="路径" >
                <el-input  label-width="80%" v-model="addBean.path"/>
              </el-form-item>
              <el-form-item label="排序" >
                <el-input-number :min="1" :max="1000" v-model="addBean.paiXu" />
              </el-form-item>
              <el-form-item label="类型" >
                  <el-select v-model="addBean.isType" disabled>
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
              </el-form-item>
            </el-form>

              <!--底部插槽-->
              <template #footer>
              <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="insert">确定</el-button>
              </span>
              </template>
          </el-dialog>

        <!--点击修改弹出对话框-->
        <el-dialog
              v-model="editDialog"
              title="修改"
              width="30%"
              :before-close="handleClose"
          >
           <el-form :model="updateBean">
            <el-form-item label="菜单id">
              <el-input  label-width="80%" v-model="updateBean.id" disabled/>
            </el-form-item>
              <el-form-item label="名称" >
                <el-input  label-width="80%" v-model="updateBean.name"/>
              </el-form-item>
              <el-form-item label="权限名称" >
                <el-input  label-width="80%" v-model="updateBean.auth"/>
              </el-form-item>
              <el-form-item label="路径" >
                <el-input  label-width="80%" v-model="updateBean.path"/>
              </el-form-item>
              <el-form-item label="排序" >
                <el-input-number :min="1" :max="1000" v-model="updateBean.paiXu" />
              </el-form-item>
              <el-form-item label="类型" >
                  <el-select v-model="updateBean.isType" disabled>
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
              </el-form-item>
            </el-form>

              <!--底部插槽-->
              <template #footer>
              <span class="dialog-footer">
                  <el-button @click="editDialog = false">取消</el-button>
                  <el-button type="primary" @click="update">确定</el-button>
              </span>
              </template>
          </el-dialog>
       
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted,reactive} from 'vue'
//引入后端接口
import {getMenuList,addMenu,editMenu,deleteMenu,getMyAuth} from '@/api/index'

//引入提示
import { ElMessage,ElMessageBox } from 'element-plus'
import { fa } from 'element-plus/es/locale/index.mjs';

//表格数据
let tableData=ref([]);

//获取分页数据
let getData=async ()=>{
  //必须异步阻塞去获取 否则拿到的就是一个Promise对象
  let res=await getMenuList();
  tableData.value=res.data;
}

//加载时调用
onMounted(()=>{
  //调用查询
  getData();
  //获取按钮权限
  getAuthData();
})

//下拉框内容
const options = [
  {
    value: '1',
    label: '菜单',
  },
  {
    value: '2',
    label: '按钮',
  }
]


//----------------------添加-----------------------

//修改对象
let addBean=reactive({
  parentId:null,
  name:'',
  auth:'',
  isType:'',
  paiXu:'',
  path:''
})
//默认不显示对话框
let dialogVisible=ref(false)
//添加显示对话框
let add=(parentId,isType)=>{
    //显示对话框
    dialogVisible.value=true;
    
    //把输入框显示的内容清空
    addBean.parentId=parentId;
    addBean.name='';
    addBean.auth='';
    addBean.isType=isType;
    addBean.paiXu='';
    addBean.path='';
}

//添加权限 调用后端接口
let insert= async ()=>{
    //调用后端添加品牌方法
    let res=await addMenu(addBean);
    console.log(res);
    if(res.code=='200'){
      //执行成功后关闭对话框
      dialogVisible.value=false;
      ElMessage.success('添加成功')
      //调用查询刷新界面
      getData();
    }else{
      //弹窗错误消息
      ElMessage.error(res.msg);
    }
}

//----------------------删除-----------------------
let del=async (id)=>{
  await ElMessageBox.confirm(
    '确定删除吗?',
    '删除',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      deleteMenu({
        id:id
      }).then((res)=>{
        if(res.code=='200'){
            ElMessage.success('删除成功')
            //调用查询刷新界面
            getData();
          }else{
            //弹窗错误消息
            ElMessage.error(res.msg);
          }
      })
      
     
    })
    .catch(() => {
      
    })


    
}


//----------------------修改-----------------------

//修改对象
let updateBean=reactive({
  id:null,
  name:'',
  auth:'',
  isType:'',
  paiXu:'',
  path:''
})
//默认不显示对话框
let editDialog=ref(false)
//显示对话框
let edit=(row)=>{
    //显示对话框
    editDialog.value=true;
    
    //把输入框显示内容赋值
    updateBean.id=row.id;
    updateBean.name=row.name;
    updateBean.auth=row.auth;
    updateBean.isType=row.isType;
    updateBean.paiXu=row.paiXu;
    updateBean.path=row.path;
}

//修改权限 调用后端接口
let update= async ()=>{
    //调用后端添加品牌方法
    let res=await editMenu(updateBean);
    if(res.code=='200'){
      //执行成功后关闭对话框
      editDialog.value=false;
      ElMessage.success('修改成功')
      //调用查询刷新界面
      getData();
    }else{
      //弹窗错误消息
      ElMessage.error(res.msg);
    }
}

//--------------------------按钮显示隐藏----------------------------
//按钮权限
//添加一级菜单按钮默认不显示
let authErAdd=ref(false);
//添加二级菜单按钮默认不显示
let authErAddSub=ref(false);
//修改按钮默认不显示
let authErEdit=ref(false);
//删除按钮默认不显示
let authErDel=ref(false);
//添加子级按钮 默认不显示
let authErBtn=ref(false);

let getAuthData= async()=>{
  //获取菜单权限
  let res=await getMyAuth();
  //如果存在对应的权限 才显示按钮
  if(res.data.indexOf('auth:er:add')!==-1){
    authErAdd.value=true;
  }
  if(res.data.indexOf('auth:er:del')!==-1){
    authErDel.value=true;
  }
  if(res.data.indexOf('auth:er:edit')!==-1){
    authErEdit.value=true;
  }
  if(res.data.indexOf('auth:er:add:sub')!==-1){
    authErAddSub.value=true;
  }
  if(res.data.indexOf('auth:er:btn')!==-1){
    authErBtn.value=true;
  }
 
  
}

</script>

<style scoped>

</style>

<style>

</style>